<template>
  <div class="login-box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
      </div>

      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="loginForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { validateUsername, validatePassword } from "@/utils/validator";
import { setItem, removeItem } from "@/utils/localStorageOpe";
import { login } from "@/api/api";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (
          valid &&
          this.loginForm.username != "" &&
          this.loginForm.password != ""
        ) {
          // const { data: res } = await this.axios.post(
          //   "http://localhost:3000/api/login",
          //   this.loginForm
          // );
          // const { data: res } = await this.$http.post("/login", this.loginForm); // 封装接口
          // console.log(res);
          // 调用封装的api登录接口方法
          const { data: res } = await login(this.loginForm);
          if (res.status !== 200) {
            this.$message({
              message: "用户名或密码错误",
              type: "error",
            });
            removeItem("token");
            removeItem("username");
            return;
          }

          setItem("username", res.username);
          setItem("token", res.token);
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.$router.push("/home");
        } else {
          removeItem("token");
          removeItem("username");
          this.$message({
            message: "用户名或密码不能为空",
            type: "error",
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss">
.login-box {
  // position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #409eff;

  .el-card__header {
    font-size: 24px;
  }

  .box-card {
    width: 450px;
    margin: 200px auto;
  }
}
</style>
